<template>
  <div>
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.date">
          <td>{{ item.date }}</td>
          <td>{{ item.uname }}</td>
          <td>{{ item.result }}</td>
          <td>{{ item.info }}</td>
          <td @click="details(item.uname)">详情</td>
        </tr>
      </tbody>
    </table>
    <PatientDetails
      v-show="flag"
      :flag="flag"
      @close="close"
      :obj="obj"
    ></PatientDetails>
  </div>
</template>

<script>
import PatientDetails from "./PatientDetails.vue";
export default {
  name: "PatientDetails",
  props: ["list"],
  components: {
    PatientDetails,
  },
  data() {
    return {
      flag: false,
      obj: {},
    };
  },
  methods: {
    details(name) {
      this.obj = this.list.find((item) => item.uname === name);
      this.flag = true;
    },
    close(value) {
      this.flag = !value;
    },
  },
};
</script>

<style>
</style>